<template>
	<view>
		<TabStrip :tablist="tabList" @tabclick='tabclick'></TabStrip>
		<view class="cu-card" v-for="(item,index) in applyList" :key="index">
			<view class="cu-item contenBox">
				<view class="input-row a-No contenBox-item" @click="goApplyForm" :data-no="item.VehicleNO" :data-status="item.VehicleStatus">
					<view class="underLine">
						<text>申请单号：</text>
						<text>{{item.VehicleNO}}</text>
					</view>
				</view>
				<view class="qrcode">
					<tkiQrcode ref="qrcode" 
					cid="qrcode" 
					:val="item.LicensePlateNO" 
					:onval="setCode.onval" 
					:size="setCode.size"
					:background="setCode.background" 
					:iconSize="setCode.iconsize" 
					:foreground="setCode.foreground" 
					:pdground="setCode.pdground" 
					:loadMake="setCode.loadMake"
					></tkiQrcode>
					<view class="">
						<text style="margin-right: 20px;">{{item.LicensePlateNO}}</text>
						<text>{{item.createTime}}</text>
					</view>
					<view  style="width: 100%;text-overflow: ellipsis;text-align: center;font-size: 12px;margin-top: 8px;">
						<text style="margin-right: 20px;">出区原因：</text>
						<text style="color: red;">{{item.InOutFlagDesc}}</text>
					</view>
				</view>
				
				<view class="input-row contenBox-item">
					申请状态：
				</view>
				<!-- <step :status="item.VehicleStatus" :stepList="stepList"></step> -->
				<view class="flex  timeLine">
					<view class="left-item">
						<view class="timeLine-item left-circle"  v-for="(item1,index1) in item.stepList"  :key="item.code">
							<view class="cu-circle" :class="{'cu-circle-line':index1<stepList.length-1}"
							 :style="[{'background-color':item1.bgcColor},{'color':item1.bgcColor&&item1.bgcColor!='white'?'white':''}]"
							>
								<text >{{item1.name}}</text>
							</view>
						</view>
					</view>
					
					<view class="right-item" >
						<view class="right-item-item flex flex-direction">
							<view class="flex justify-between first-child">
								<view >{{item.ApplyStatusDesc}}</view>
								<view class="text-gray">{{item.ApplyDatetime}}</view>
							</view>
							<view class="text-gray">{{item.ApplyMark}}</view>
						</view>
						<view class="right-item-item flex flex-direction" >
							<view class="flex justify-between first-child">
								<view>{{item.WarehouseStatusDesc}}</view>
								<view class="text-gray">{{item.WarehouseDatetime}}</view>
							</view>
							<view class="text-gray">{{item.WarehouseMark}}</view>
						</view>
						<view class="right-item-item flex flex-direction">
							<view class="flex justify-between first-child">
								<view>{{item.SecurityStatusDesc}}</view>
								<view class="text-gray">{{item.SecurityDatetime}}</view>
							</view>
							<view class="text-gray">{{item.SecurityMark}}</view>
						</view>
						<view class="right-item-item flex flex-direction">
							<view class="flex justify-between first-child">
								<view>{{item.OutStatusDesc}}</view>
								<view class="text-gray">{{item.OutDatetime}}</view>
							</view>
							<view class="text-gray">{{item.OutMark}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="haveNOList" v-else><view class="haveNOList-view">暂无数据</view></view> -->
	</view>
</template>

<script>
	
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import TabStrip from '@/components/tabstrip.vue'
	import moment from 'moment'
	import step from '@/components/step/step.vue'
	// import stepList from '../util.js'
	export default {
		components: {
			TabStrip,
			tkiQrcode,
			step,
		},
		data() {
			return {
				bgcColoe:['red','green'],
				status: 0,
				stepList:[
					{	name: '申请',code: "0",bgcColor:'green' }, 
					{name: '仓管',code: "1",bgcColor:'white' },
					{name: '安保',code: "2",bgcColor:'white' },
					{name: '出区',code: "3",bgcColor:'white' },
				],
				setCode: {
					size: 200, // 二维码大小
					unit: 'upx', // 单位
					background: '#fff', // 背景色
					foreground: '#000000', // 前景色
					pdground: '#2F4F4F', // 角标色 
					icon: '', // 二维码图标
					iconsize: 40, // 二维码图标大小
					lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
					onval: true, // val值变化时自动重新生成二维码    （一定要注意这个值的设置 刷新二维码使用的）
					loadMake: true, // 组件加载完成后自动生成二维码
					//src: '',  二维码生成后的图片地址或base64
				},
				qrcode: '',
				session: {},
				tabList: ['进行中', '已完成'],
				tabKey: 0,
				applyList:[],
			}
		},
		created() {
			
			const session = uni.getStorageSync('session');
			this.session = session;
			this.getMyApply()
		},
		methods: {
			// creatQrCode(code = "12345") {
			// 	return drawQrcode({
			// 		width: 100,
			// 		height: 100,
			// 		canvasId: 'item.qrcode',
			// 		text: JSON.stringify(code)
			// <view class="qrcode">
			// 	<canvas style="width: 100px;height: 100px;" canvas-id="item.qrcode"></canvas>
			// </view> 
			// 	})
			// },
			goApplyForm(e) {
				const {
					no,
					status
				} = e.currentTarget.dataset;
				uni.navigateTo({
					url:`/pages/home/applyThrough/applicationForm?no=${no}&status=${status}`
				})
			},
			tabclick(index) {
				this.tabKey = index
				this.getMyApply()
			},
			getMyApply() {
				this.$store.dispatch('uni/GetVehicleInformationList', {
					openid: this.session.openid,
					isFinished: this.tabKey === 0 ? "0" : "1"
					
				}).then(res => {
					
					this.applyList= res.Data&&res.Data.map(item => {
						const {CreateTime,VehicleStatus,...v}=item
						let stepList=this.stepList.map((v,index)=>{
							const {bgcColor,...o}=v
							switch(index){
								case 0:
								o.bgcColor=item.ApplyStatusColor
								break;
								case 1:
								o.bgcColor=item.WarehouseStatusColor
								break;
								case 2:
								o.bgcColor=item.SecurityStatusColor
								break;
								case 3:
								o.bgcColor=item.OutStatusColor;
								break;
							}
							return {...o}
						})
						stepList.forEach(v=>{console.log(v.bgcColor)})
						return {
							VehicleStatus:parseInt(VehicleStatus),
							createTime:moment(CreateTime).format('MM/DD HH:mm'),
							stepList,
							...v,
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contenBox {
		font-size: 16px;
		padding-bottom: 20px;
		&-item {
			height: 40px;
			color: #61C7E3;
			.underLine {
				border-bottom: 1px solid #61C7E3;
			}
		}

		.qrcode {
			// padding: 50upx 0 20upx 0;
			margin: 10px 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		&-border {
			border: 1px solid #DADADA;
			border-radius: 5px;
			width: 70vw;
			height: 33px;
			line-height: 33px;
			padding-left: 6px;
		}
	}
	.timeLine{
		height: 300px;
		padding:0px 20px ;
		&-item{
		}
		.left-item{
			text-align: center;
			width: 78px;
			
			display: flex;
			flex-direction:column;
		}
		
		.left-circle{
			display: flex;
			position: relative;
			flex:1;
			.cu-circle{
				width:50px ;
				height: 50px;
				line-height: 50px;
				border: 1px solid #eee;
				background-color: #FFF;
				border-radius: 50%;
				color: #414141;
			}
			.cu-circle-line::after{
				content: " ";
				position: absolute;
				top: 50px;
				left: 25px;
				// width: 90%;
				height: 35px;
				background-color: #ccc;
				width: 1px;
			}
		}
		.right-item{
			
			flex: 1;
			display: flex;
			flex-direction: column;
			&-item{
				flex:1;
				color: #424743;
				.first-child{
					height: 40%;
				}
			}
			
		}
		
	}
</style>
